import React from 'react';
import { Modal, Button } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';

export interface ConfirmDialogProps {
  open: boolean;
  title: string;
  content: string;
  type?: 'warning' | 'danger' | 'info';
  okText?: string;
  cancelText?: string;
  loading?: boolean;
  onOk: () => void | Promise<void>;
  onCancel: () => void;
}

const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
  open,
  title,
  content,
  type = 'warning',
  okText = '确定',
  cancelText = '取消',
  loading = false,
  onOk,
  onCancel,
}) => {
  const getIcon = () => {
    switch (type) {
      case 'danger':
        return <ExclamationCircleOutlined className="text-red-500" />;
      case 'warning':
        return <ExclamationCircleOutlined className="text-yellow-500" />;
      case 'info':
        return <ExclamationCircleOutlined className="text-blue-500" />;
      default:
        return <ExclamationCircleOutlined className="text-yellow-500" />;
    }
  };

  const getOkButtonType = (): 'default' | 'primary' | 'dashed' | 'link' | 'text' => {
    switch (type) {
      case 'danger':
        return 'primary';
      case 'warning':
        return 'primary';
      case 'info':
        return 'primary';
      default:
        return 'primary';
    }
  };

  const getOkButtonDanger = () => {
    return type === 'danger';
  };

  return (
    <Modal
      open={open}
      title={
        <div className="flex items-center gap-3">
          {getIcon()}
          <span className="text-lg font-semibold">{title}</span>
        </div>
      }
      onCancel={onCancel}
      footer={[
        <Button key="cancel" onClick={onCancel} disabled={loading} className="btn-secondary">
          {cancelText}
        </Button>,
        <Button
          key="ok"
          type={getOkButtonType()}
          danger={getOkButtonDanger()}
          loading={loading}
          onClick={onOk}
          className="btn-primary"
        >
          {okText}
        </Button>,
      ]}
      width={400}
      centered
      maskClosable={!loading}
      closable={!loading}
    >
      <div className="py-4">
        <p className="text-gray-700 leading-relaxed">{content}</p>
      </div>
    </Modal>
  );
};

// Hook for easier usage
export const useConfirm = () => {
  const [state, setState] = React.useState<{
    open: boolean;
    props: Omit<ConfirmDialogProps, 'open'>;
  }>({ 
    open: false, 
    props: {
      title: '',
      content: '',
      onOk: () => {},
      onCancel: () => {},
    }
  });

  const confirm = React.useCallback((props: Omit<ConfirmDialogProps, 'open'>) => {
    return new Promise<boolean>((resolve) => {
      setState({
        open: true,
        props: {
          ...props,
          onOk: async () => {
            try {
              await props.onOk();
              setState(prev => ({ ...prev, open: false }));
              resolve(true);
            } catch (error) {
              console.error('确认操作失败:', error);
              resolve(false);
            }
          },
          onCancel: () => {
            props.onCancel?.();
            setState(prev => ({ ...prev, open: false }));
            resolve(false);
          },
        },
      });
    });
  }, []);

  const ConfirmComponent = React.useMemo(() => (
    <ConfirmDialog
      open={state.open}
      {...state.props}
    />
  ), [state]);

  return { confirm, ConfirmComponent };
};

export default ConfirmDialog;